body {
	color: #666;
	text-align: center;
	background: url('/img/icon/bg.png') repeat;
	font-family: Helvetica Neue,PingFang SC,Helvetica,Arial,Hiragino Sans GB,
		Microsoft Yahei,\\5FAE\8F6F\96C5\9ED1,STHeiti,\\534E\6587\7EC6\9ED1,sans-serif;
}

body, h1, ul, li {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
.blueBorder {
	border: 1px solid #527ed9;
}
.notAllowed {
	filter: opacity(.5);
    pointer-events: none;
}
.notAllowedAbsolutely {
	filter: opacity(.5) !important;
    pointer-events: none !important;
}

/********* main **********/

main {
	margin: 6em auto;
	width: 28em;
	text-align: center;
	border-radius: .5em;
	overflow: hidden;
	background: linear-gradient(#fff 60%, #ededed);
	border: 1px solid #dadada;
	box-shadow: 
		0 9px 30px -6px rgba(0,0,0,.2),
	   	0 18px 20px -10px rgba(0,0,0,.04),
	   	0 18px 20px -10px rgba(0,0,0,.04),
	    0 10px 20px -10px rgba(0,0,0,.04);
}
main > header {
	margin-top: 3em;
}
main > header figure figcaption p {
	font-size: 1.3em;
	color: black;
}

main > section {
	padding: 2em 3em 0 3em;
}
main > section ul li {
	position: relative;
	display: flex;
	margin-bottom: 1em;
	border: 1px solid #ccc;
	border-radius: .4em;
	overflow: hidden;
}
#aside {
	position: relative;
	border: none;
	font-size: .8em;
}
#aside > a {
	position: absolute;
	right: 0;
	text-decoration: none;
	color: #5079d9;
	transition: color .3s ease-in-out;
}
#aside > a:hover {
	color: blue;
}
main > section ul li > label {
	display: inline-block;
	width: 3em;
	height: 3em;
	background-color: red;
	vertical-align: top;
	background: linear-gradient(#f8f8f8,#fafafa);
}
main > section ul li > label > span {
	display: block;
	height: 100%;
	border-right: 1px solid #ccc;
}
main > section ul li > label .png-name {
	background: url('/img/icon/name.png') center no-repeat;
}
main > section ul li > label .png-pwd {
	background: url('/img/icon/pwd.png') center no-repeat;
}
main > section ul li > input {
	flex-grow: 1;
	padding: .8em;
	font-size: 1em;
	border: none;
	outline: none;
}
main > section ul li .error-pwd,
main > section ul li .error-name {
	position: absolute;
	padding: 0.4em .8em;
	right: .8em;
	top: .8em;
	background: #d16d62;
	color: #fff;
	font-weight: 400;
	font-size: .6em;
	border-radius: .3em;
	filter: opacity(0);
	transition: all .3s ease-in-out;
}

#submit {
	display: block;
	margin: 2em 0;
	padding: .5em 0;
	width: 100%;
	font-size: 1.2em;
    color: #fff;
    border-radius: .3em;
    background-color: #5e88de;
    transition: all .3s ease-in-out;
    outline: none;
    cursor: pointer;
}
#submit:hover {
	background-color: #5a82d4;
}

/********** footer **********/

footer {
	font-size: .8em;
}